<template>
  <div class="setting">
    <div class="setting-content">
      <q-splitter v-model="splitterModel" style="height: 250px">
        <template v-slot:before>
          <q-tabs v-model="active" vertical class="text-teal">
            <q-tab name="avatar" label="头像" />
            <q-tab name="user" label="个人资料" />
            <q-tab name="password" label="密码管理" />
            <q-tab name="system" label="系统设置" />
          </q-tabs>
        </template>
        <template v-slot:after>
          <q-tab-panels
            v-model="active"
            animated
            transition-prev="jump-up"
            transition-next="jump-up"
          >
            <q-tab-panel name="avatar">
              <div class="text-h4 q-mb-md">
                <div class="avatar-wrap">
                  <Upload />
                </div>
              </div>
            </q-tab-panel>

            <q-tab-panel name="user">
              <div class="text-h4 q-mb-md">
                <User />
              </div>
            </q-tab-panel>
            <q-tab-panel name="password">
              <div class="text-h4 q-mb-md">
                修改密码
              </div>
            </q-tab-panel>
            <q-tab-panel name="system">
              <div class="text-h4 q-mb-md">
                系统设置
              </div>
            </q-tab-panel>
          </q-tab-panels>
        </template>
      </q-splitter>
    </div>
    <div class="setting-footer">
      <q-btn :loading="loading" color="primary" @click="handleLogout">
        退出登录
      </q-btn>
    </div>
  </div>
</template>

<script>
import Upload from './components/Upload';
import User from './components/User';

export default {
  components: {
    Upload,
    User,
  },
  data() {
    return {
      loading: false,
      active: 'avatar',
      splitterModel: 30,
    };
  },

  methods: {
    // 退出登录
    handleLogout() {
      this.loading = true;
      localStorage.clear();
      setTimeout(() => {
        this.loading = false;
        this.$q.notify({
          color: 'secondary',
          textColor: '#fff',
          icon: 'check',
          position: 'top',
          message: '操作成功',
        });
        this.$router.push('/login');
      }, 3000);
    },
  },
};
</script>

<style lang="scss" scoped>
@import '~@/styles/quasar.variables.scss';

.setting {
  background: $bg_color1;
  padding: 20px;
  .setting-content {
    height: calc(100vh - 118px);
    padding: 20px;
    background: #fff;
    .avatar-wrap {
      // width: 400px;
      // height: 400px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .setting-footer {
    height: 40px;
    text-align: center;
  }
}
</style>
<style lang="scss">
.setting {
  .q-splitter__before,
  .q-splitter__after {
    overflow: inherit !important;
  }
}
</style>
